<!-- 主题颜色组件 -->
<template>
  <div class="color_picker_box">
    <!-- <color-picker @change="change" v-model:hex="hex"></color-picker> -->
    <el-tooltip content="自定义主题色">
      <div class="item-box">
        <color-picker v-model:hex="hex" @change="change"></color-picker>
      </div>
    </el-tooltip>
    <!-- 固定颜色 -->
    <div
      class="item-color"
      v-for="(item, index) in ColorList"
      :key="index"
      :style="{ backgroundColor: item.hex }"
      @click="changeFixColor(index, item)"
      :class="[isChecked === index ? 'active' : '']"
    ></div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useResumeJsonStore } from '@/store/resume'
let userResumeStore = useResumeJsonStore()
// let $emit = defineEmits([
//   'update:leftColor',
//   'update:rightColor',
//   'update:themeColor',
// ])
let $emit = defineEmits(['update:modelValue', 'changeColor'])
const hex = ref('#90a2b5')
const isChecked = ref(-1)
//固定颜色按钮
const changeFixColor = (index: number, item: any) => {
  //晕染边框
  isChecked.value = index
  hex.value = item.hex
  $emit('update:modelValue', item.hex)
  $emit('changeColor', item.hex)
}
//颜色调色器
const change = (e: any) => {
  // console.log(e) // {hex: '#ddd8c3', rgba: 'rgba(221,216,195,0.5849)'}
  // $emit('update:leftColor', e.hex)
  // $emit('update:rightColor', e.hex)
  // $emit('update:themeColor', e.hex)
  $emit('update:modelValue', e.hex)
  $emit('changeColor', e.hex)
}
const ColorList = reactive<Array<{ rgb: string; hex: string }>>([
  {
    rgb: 'rgb(37,70,101)',
    hex: '#254665',
  },
  {
    rgb: 'rgb(221,65,94)',
    hex: '#dd415e',
  },
  {
    rgb: 'rgb(150,122,91)',
    hex: '#967a5b',
  },
  {
    rgb: 'rgb(51,144,205)',
    hex: '#3390cd',
  },
  {
    rgb: 'rgb(245,79,79)',
    hex: '#f54f4f',
  },
  {
    rgb: 'rgb(77,77,77)',
    hex: '#4d4d4d',
  },
  {
    rgb: 'rgb(170,132,96)',
    hex: '#aa8460',
  },
  {
    rgb: 'rgb(118,186,49)',
    hex: '#76ba31',
  },
  {
    rgb: 'rgb(100,126,201)',
    hex: '#647ec9',
  },
])
</script>
<style lang="scss" scoped>
//修改为圆角取色器
:deep(.zs-color-picker) {
  border-radius: 50%;

  .zs-color-picker-btn {
    border-radius: 50%;

    .zs-color-picker-btn-color {
      border-radius: 50%;
    }
  }
}

.active {
  box-shadow: rgb(99, 100, 99) 0px 0px 10px;
}

.color_picker_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 40px;

  .item-box {
    width: 30px;
    height: 26px;
    border-radius: 50%;
    margin-left: 2px;
  }

  .item-color {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    margin: 7px 7px;
  }
}
</style>
